<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素绑定</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model.trim="val1" style="display: block;">
        <input type="textarea" v-model="val2">
        <div><input type="checkbox" v-model="val3" >同意手术</div>
        <ul>
            <li><input type="radio" name="sex" value="男" v-model="val4" >男</li>
            <li><input type="radio" name="sex" value="女" v-model="val4" >女</li>
        </ul>
        <ul>
            <li><input type="checkbox" name="stuff" value="手机" v-model="val5" >手机</li>
            <li><input type="checkbox" name="stuff" value="电脑" v-model="val5" >电脑</li>
            <li><input type="checkbox" name="stuff" value="平板" v-model="val5" >平板</li>
            <li><input type="checkbox" name="stuff" value="小说" v-model="val5" >小说</li>
        </ul>
        <select v-model="val6">
            <option value="1">睡觉</option>
            <option value="2">吃饭</option>
            <option value="3">学习</option>
            <option value="4">游戏</option>
        </select>
        <div>{{val1}}</div>
        <input type="text" @input="handleInput" :value="val"><div>{{val}}</div>
        <input type="text" @input="handleInput($event)" :value="val"><div>{{val}}</div>
    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    val0:1,
                    val1:"hello",
                    val2:"world",
                    val3:true,
                    val4:"男",
                    val5:["手机","电脑"],
                    val6:"2",
                    val:"hhh"
                }
            },
            methods: {
                handleInput(e){
                    this.val=e.target.value;
                }
            },
            computed: {
                
            }
        }).mount('#app');
    </script>
</body>

</html>